<template>
    <div>
        <Tabcomponent></Tabcomponent>
        <PersonalItem>
            <div class="return">
                <div>{{$t('langs.Centers.goods.title')}}</div>
                <table>
                    <tr>
                        <td>{{$t('langs.Centers.goods.td1')}}</td>
                        <td>{{$t('langs.Centers.goods.td2')}}</td>
                        <td>{{$t('langs.Centers.goods.td3')}}</td>
                        <td>{{$t('langs.Centers.goods.td4')}}</td>
                        <td>{{$t('langs.Centers.goods.td5')}}</td>
                    </tr>
                    <tr class="tr" v-for="(item,index) in 4" :key="index" @click="toapplyforreturn">
                        <td>
                            <img src="../assets/img/0FB.png" alt="">
                            <p>3件装 | MEDIHEAL 美迪惠尔 N.M.F针剂水库保湿面膜 10片/盒</p>
                        </td>
                        <td>8000.0元</td>
                        <td>2018-04-06 16:31:06</td>
                        <td>{{$t('langs.Centers.goods.td6')}}</td>
                        <td>{{$t('langs.Centers.goods.td9')}}</td>
                    </tr>
                </table>
            </div>
        </PersonalItem>
    </div>
</template>

<script>
import Tabcomponent from '@/components/Tabcomponent.vue'//头部导航
import PersonalItem from "@/components/PersonalItem.vue"
export default {
    components: {
        Tabcomponent,
        PersonalItem
    },
    methods: {
        toapplyforreturn() {
            this.$router.push({
                path: 'applyforreturn'
            })
        }
    },    
}
</script>

<style lang='scss'>
.return {
    >div:nth-child(1) {
        font-size: 16px;
    }
    >table {
        border: 1px solid #e5e5e5;
        margin-top: 10px;
         border-collapse: collapse;
        td {
            font-size: 14px;
        }
        >tr {
            >td:nth-child(1) {
                width: 280px;
                padding-left: 20px;
            }
            >td:nth-child(2) {
                width: 90px;
                text-align: center;
            }
            >td:nth-child(3) {
                width: 140px;
                text-align: center;
            }
            >td:nth-child(4) {
                width: 68px;
                text-align: center;
            }
            >td:nth-child(5) {
                width: 140px;
                text-align: center;
            }
        }
        >tr:nth-child(1) {
            line-height: 40px;
        }
        >.tr {
           cursor: pointer;
            >td {
                font-size: 12px;
                margin: 0;
                border-top: 1px solid #e5e5e5;
                padding: 9px 0;
            }
            >td:nth-child(1) {
                overflow: hidden;
                >img {
                    width: 70px;
                    height: 70px;
                    float: left;
                    vertical-align: top;
                }
                >p {
                    width: 180px;
                    line-height: 18px;
                    float: left;
                    margin-left: 20px;
                    margin-top: 10px;
                }
            }
            >td:nth-child(2) {
                color: #E93233;
            }
        }
    }
}
</style>